<template>
	<view>
		<view class="header status_bar">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">提交订单</view>
		</view>
		<!-- <view class="clear_box"></view> -->

		<view class="address_box">
			<view class="icon iconfont icon-dizhiguanli"></view>
			<view class="text_box" v-if="address">
				<view class="name_box">
					<view class="name">{{address.name}}</view>
					<view class="phone">{{address.phone}}</view>
				</view>
				<view class="address">{{address.text}}</view>
			</view>
			<view class="text_box" v-if="!address">
				<view class="add_box">
					<view class="text">添加收货地址</view>
					<view class="arrow iconfont icon-jiantouyou"></view>
				</view>
			</view>
		</view>


		<view class="content">

			<view class="goods_box">
				<image class="goods_img" src="../../static/img01/cp01.png" mode="scaleToFill"></image>
				<view class="text_box">
					<view class="title">特级紫红袍茶叶浓香型礼盒装500g（62泡）</view>
					<!-- <view class="text">
								<view class="n">{{ item02.sku_name }}</view>
							</view> -->
					<view class="show">
						<view class="money_box">
							￥378
						</view>
						<view class="menu">x1</view>
					</view>
				</view>
			</view>
			
			<view class="address_list">
				<view class="title">配送方式</view>
				<view class="text">普通配送</view>
			</view>
			<view class="address_list">
				<view class="title">订单备注</view>
				<input type="text" value="" placeholder="选填，请先和商家协商一致" />
			</view>

		</view>
		
		<view class="confirm">确认付款</view>

		









	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				address: {
					name: '程笑笑',
					phone: '15880123225',
					text: '地址：福建省福州市晋安区福光路162号'
				},
			};
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
			//that.loadData()
		},
		methods: {
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value);
				this.checkeData = e.target.value;
				// if(this.checkeData == true){
				// 	this.whether = 1
				// }else if(this.checkeData == false){
				// 	this.whether = 0
				// }
			},
			loadData() {
				let that = this;
				that.Net._get('user/addresses', {
					per_page: '10',
					page: that.page
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			}



		},

	};
</script>

<style>
	page {
		background-color: #F7F8FA !important;
		padding-bottom: 0 !important;
	}

	.header .text {
		background-color: #024D4F;
		color: #fff;
	}

	.header .back {
		color: #fff;
	}

	.address_box {
		width: 92%;
		margin: 8% auto 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 5vw 4%;
		border-radius: 4vw;
	}

	.address_box .icon {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		font-size: 5vw;
		color: #fff;
		background-color: #0DA4AD;
		margin-right: 3vw;
	}

	.address_box .text_box {
		flex: 1;
	}

	.address_box .text_box .name_box {
		width: 100%;
		display: flex;
	}

	.address_box .text_box .name_box .name {
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		line-height: 6vw;
	}

	.address_box .text_box .name_box .phone {
		font-size: 3.5vw;
		color: #999;
		line-height: 6vw;
		margin-left: 3vw;
	}

	.address_box .text_box .address {
		font-size: 3.4vw;
		color: #666;
		line-height: 5vw;
		margin-top: 1.5vw;
	}

	.address_box .text_box .add_box {
		display: flex;
		margin-top: 3vw;
	}

	.address_box .text_box .add_box .text {
		font-size: 3.5vw;
		color: #666;
		line-height: 6vw;
		flex: 1;
	}

	.address_box .text_box .add_box .arrow {
		font-size: 4vw;
		color: #999;
		line-height: 6vw;
		flex: 1;
		text-align: right;
	}

	.content {
		width: 92%;
		margin: 4% auto 0;
		background: #fff;
		border-radius: 4vw;
		padding: 4% 4%;
	}

	.content .goods_box {
		width: 100%;
		display: flex;
		margin-bottom: 2vw;
	}

	.content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin: 0 3vw;
	}

	.content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}

	.content .goods_box .text_box .title {
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.content .goods_box .text_box .text {
		margin-top: 2vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content .goods_box .text_box .text .n {
		font-size: 3.2vw;
		color: #999;
	}

	.content .goods_box .text_box .text .m {
		font-size: 3.2vw;
		color: #999;
	}

	.content .goods_box .text_box .show {
		width: calc(100%);
		display: flex;
		position: relative;
		margin-top: 6vw;
	}

	.content .goods_box .text_box .show .money_box {
		width: 65%;
		display: flex;
		justify-content: flex-start;
		font-size: 4vw;
		color: #333333;
		line-height: 6vw;
		font-weight: bold;
	}

	.content .goods_box .text_box .show .money_box .no_money {
		color: #999;
		line-height: 6vw;
		position: relative;
		font-size: 3.5vw;
		margin-left: 0.5vw;
		font-weight: 500;
		margin-left: 1.5vw;
	}

	.content .goods_box .text_box .show .money_box .no_money .line {
		width: 100%;
		height: 1px;
		background-color: #999;
		position: absolute;
		top: calc(50% - 0vw);
		left: 0;
	}

	.content .goods_box .text_box .show .menu {
		line-height: 5vw;
		color: #999;
		font-size: 3.5vw;
		position: absolute;
		right: 0vw;
	}

	.address_list {
		width: 100%;
		background-color: #fff;
		padding: 0 4%;
		display: flex;
	}

	.address_list .title {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #333;
		display: flex;
		align-items: center;
	}

	.address_list .title span {
		margin-left: 1vw;
		color: #ff7f22;
	}

	.address_list .text {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}

	.address_list .money {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #333333;
		text-align: right;
		font-weight: bold;
	}

	.address_list input {
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		font-size: 3.5vw;
		color: #999;
		text-align: right;
	}

	.address_list .coupon {
		color: #333333;
	}
</style>